import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import {
   Link,
   Switch,
   Route 
} from 'react-router-dom'
import StudentList from './students/showList'
import StudentDistribution from './students/stundentDistribution'

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

function Main(){
    return(
        <div>
           <Layout>
    <Header className="header">
      <div className="logo" />
      <h1 style={{color:"#fff"}}>学生系统系统</h1>
    </Header>
    <Layout>
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{ height: '100%', borderRight: 0 }}
        >
          <SubMenu key="sub1" icon={<UserOutlined />} title="学生资料">
            <Menu.Item key="1">
                <Link to="/main/studentlist">显示学生信息</Link>
            </Menu.Item>
            <Menu.Item key="2">
            <Link to="/main/studentdistribution">学生分布情况</Link>

            </Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
            <Menu.Item key="5">option5</Menu.Item>
            <Menu.Item key="6">option6</Menu.Item>
            <Menu.Item key="7">option7</Menu.Item>
            <Menu.Item key="8">option8</Menu.Item>
          </SubMenu>
          <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
            <Menu.Item key="9">option9</Menu.Item>
            <Menu.Item key="10">option10</Menu.Item>
            <Menu.Item key="11">option11</Menu.Item>
            <Menu.Item key="12">option12</Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout style={{ padding: '0 24px 24px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>学生系统</Breadcrumb.Item>
          <Breadcrumb.Item>学生资料</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
         <Switch>
             <Route path="/main/studentlist" component={StudentList}></Route>
             <Route path="/main/studentdistribution" component={StudentDistribution}></Route>

         </Switch>
        </Content>
      </Layout>
    </Layout>
  </Layout>
        </div>
    )
}

export default  Main